jQuery(function($){

    var chartLabels = [],
        chartDatas = [];

    var initPage = _.once(function(){
        // 日期控件
        $('.startDate').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: 'yyyy-mm-dd',
        }).on('changeDate', function(ev){
            $('.endDate').datepicker('setStartDate', ev.date);
        });
        $('.endDate').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: 'yyyy-mm-dd',
        }).on('changeDate', function(ev){
            $('.startDate').datepicker('setEndDate', ev.date);
        });

        _.each($('.dTable tbody tr'), function( value, key, list ){
            var $tds = $(value).find('td span');
            chartLabels.push($tds.eq(0).html());
            chartDatas.push($tds.eq(1).html());
        });
        chartLabels = chartLabels.reverse();
        chartDatas = chartDatas.reverse();

        var ctx = $("#myChart").get(0).getContext("2d");
    
        var data = {
            labels: chartLabels,
            datasets: [
                {
                    label: "交易数量",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: chartDatas
                },
            ]
        };
        
        var myLineChart = new Chart(ctx).Line(data, {});
        $('.chartTitle').html('交易数量');

        $('.countSale').on('click', '.dTable th i', function(event) {
            event.preventDefault();
            var $this = $(this);
            var tid = $this.attr('tid');
            chartDatas = [];
            $('.chartTitle').html($('.dTable th span').eq(tid).html());

            _.each($('.dTable tbody tr'), function( value, key, list ){
                var $tds = $(value).find('td span');
                chartDatas.push($tds.eq(tid).html());
            });
            chartDatas = chartDatas.reverse();
            
            var canvasHtml = '<canvas id="myChart" width="1000" height="400"></canvas>';
            $('.canvasBox').html(canvasHtml);

            var ctx = $("#myChart").get(0).getContext("2d");
            var data = {
                labels: chartLabels,
                datasets: [
                    {
                        label: $('.dTable tbody th').eq(tid),
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: chartDatas
                    },
                ]
            };
            var myLineChart = new Chart(ctx).Line(data, {});

        });
    });

    initPage();

    
    

}(jQuery));